<template lang="pug">
.ratings(v-if='getScoreData')
  ul(v-if="getScoreData.length > 0")
    li.rating-item(v-for="(item, index) in getScoreData", :key="index")
      .avatar
        img(width='28', height='28', :src='item.avatar')
      .content
        h1.name {{item.nickname}}
        .star-wrapper
          //span.delivery 30分钟内
        p.text {{(item.contents)}}
        .recommend
          span.icon-thumb_up
            i.iconfont &#xe61c;
          span.item 商品描述：{{item.product_score}}星
          span.item 服务：{{item.service_score}}星
          span.item 快递：{{item.post_score}}星
        .time {{item.time}}
  .tips.tac(v-else)
    p 暂无评论
</template>

<script>
export default {
  computed: {
    getScoreData() {
      if(this.$store.getters.goodsScore) {
        return this.$store.getters.goodsScore.list
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.ratings
  padding: 0 18px
  .rating-item
    display: flex
    padding: 18px 0
    // bdb-1px(rgba(7, 17, 27, 0.1))
    .avatar
      flex: 0 0 38px
      width: 38px
      height: 38px
      margin-right: 12px
      img
        width: 100%
        height: 100%
        border-radius: 50%
    .content
      position: relative
      flex: 1
      .name
        margin-bottom: 4px
        line-height: 12px
        font-size: 16px
        color: rgb(7, 17, 27)
      .star-wrapper
        margin-bottom: 6px
        font-size: 0
        .star
          display: inline-block
          margin-right: 6px
          vertical-align: top
        .delivery
          display: inline-block
          vertical-align: top
          line-height: 12px
          font-size: 12px
          color: rgb(147, 153, 159)
      .text
        margin-bottom: 8px
        line-height: 18px
        color: rgb(7, 17, 27)
        font-size: 12px
      .recommend
        line-height: 16px
        font-size: 0
        .icon-thumb_up, .item
          display: inline-block
          margin: 0 8px 4px 0
          font-size: 12px
        .icon-thumb_up
          color: rgb(0, 160, 220)
        .item
          padding: 0 6px
          border: 1px solid rgba(7, 17, 27, 0.1)
          border-radius: 1px
          color: rgb(147, 153, 159)
          background: #fff
      .time
        position: absolute
        top: 0
        right: 0
        line-height: 12px
        font-size: 12px
        color: rgb(147, 153, 159)
  .tips
    p
      margin: 10% auto
      font-size: 16px
      color: #666
</style>
